.truncate {
  overflow: hidden;
  text-align: inherit;
}
.truncate:not(.multiline) {
  display: block;
  max-width: 100%;
  /**
   * Why not just use `-webkit-box` for single line cases too? Because it
   * doesn't perform as well when truncating very short strings. For example,
   * the text "foobar" gets truncated to "..." instead of "foo..."
   */
  text-overflow: ellipsis;
  white-space: nowrap;
}
.truncate.multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.dropdown.truncation-content {
  padding: 0.5rem;
  font-size: var(--sm1);
  border-radius: 0.2rem;
  max-width: var(--tooltip-max-width, 22rem);
}
